<template>
  <view class="v-swiper-card">
    <swiper
      :circular="circular !== false"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      @change="change"
    >
      <swiper-item
        v-for="(item, index) in list"
        :key="index"
        @click="$emit('click', item)"
      >
        <view class="flex swiper-item">
          <view class="item-content">
            <view class="flex flex-col" style="width: 56%">
              <view class="tip-top text-ellipsis">
                {{ item.tipTop }}
              </view>
              <view class="label text-ellipsis">
                {{ item.label }}
              </view>
              <view class="tip-bottom text-ellipsis">
                {{ item.tipBottom }}
              </view>
            </view>
            <view style="position: absolute; right: 80rpx; top: 0">
              <v-image
                height="280rpx"
                width="240rpx"
                border-radius="16rpx"
                :src="item.image"
                mode="aspectFill"
              />
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import type VImage from '@/components/v-image/v-image.vue';
import type VVideo from '@/components/v-video/v-video.vue';
const props = withDefaults(
  defineProps<{
    list: {
      image: string;
      tipTop: string;
      label: string;
      tipBottom: string;
    }[];
    imgKey?: string;
    autoplay?: boolean;
    circular?: boolean;

    interval?: number;
    duration?: number;
  }>(),
  {
    list: () => [],
    imgKey: 'src',
    autoplay: true,
    circular: true,

    interval: 5000,
    duration: 500,
  },
);

interface Emits {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (event: 'click', val: any): void;
  (event: 'update:current', val: number): void;
}
const emits = defineEmits<Emits>();

// eslint-disable-next-line func-call-spacing
const itemRef = ref<
  (InstanceType<typeof VImage> | InstanceType<typeof VVideo>)[]
    >([]);

const list = toRef(props, 'list');

const currentIndex = ref<number>(0);
const total = ref<number>(0);
const change = (event: SwiperChangeEvent) => {
  currentIndex.value = event.detail.current;
  emits('update:current', currentIndex.value);

  if (!list.value) return;
  for (let i = 0; i < itemRef.value.length; i++) {
    const item = itemRef.value[i];
    if (i !== event.detail.current && list.value[i]?.isVideo) {
      const videoRef = item as InstanceType<typeof VVideo>;
      videoRef?.pause();
    }
  }
};

onMounted(() => {
  watch(
    list,
    (val) => {
      if (!val) return;
      currentIndex.value = 0;
      total.value = val.length;
    },
    { immediate: true },
  );
});
</script>

<style lang="scss" scoped>
.v-swiper-card {
  position: relative;
  height: fit-content;
  width: fit-content;
  width: 100%;

  .swiper-item {
    height: 100%;
    padding: 0 24rpx 12rpx;
    display: flex;
    align-items: center;
    position: relative;

    .item-content {
      width: 100%;
      border-radius: 40rpx;
      padding: 34rpx 46rpx;
      background-color: var(--primary-color);
    }
  }

  .tip-top {
    min-height: 30rpx;
    font-size: 20rpx;
    margin-bottom: 24rpx;
  }

  .label {
    min-height: 46rpx;
    font-weight: bold;
    font-size: 32rpx;
    margin-bottom: 16rpx;
  }

  .tip-bottom {
    min-height: 34rpx;
    font-size: 24rpx;
    font-weight: bold;
  }
}
</style>
